/* 
 * 实名认证
 */
import React from 'react';
import { Modal } from 'antd';
import './realcheck.css';
import personalImg from '../../../images/identify_personal.png';
import enterpriseImg from '../../../images/identify_enterprise.png';
import developerImg from '../../../images/identify_developer.png';

class RealCheck extends React.Component {
    state = {
        realCheck: [
            {
                // 个人认证
                name: '个人认证',
                type: 'personal',
                desc: '用于个人或个体经营户认证，认证通过可获得短信模板自定义及认证用户特权',
                combo: [
                    {
                        name: '自定义短信条数',
                        desc: '5条'
                    },
                    {
                        name: '云市场认证优惠',
                        desc: '有'
                    },
                    {
                        name: '个人认证勋章',
                        desc: '有'
                    }
                ],
                using: true
            },
            {
                // 企业认证
                name: '企业认证',
                type: 'enterprise',
                desc: '用于企事业单位认证，认证通过可获得短信模板自定义及认证用户特权',
                combo: [
                    {
                        name: '自定义短信条数',
                        desc: '10条'
                    },
                    {
                        name: '云市场认证优惠',
                        desc: '有'
                    },
                    {
                        name: '企业认证勋章',
                        desc: '有'
                    },
                    {
                        name: '免费400电话(含800元话费)',
                        desc: '有'
                    }
                ],
                using: true
            },
            {
                // 服务商认证
                name: '服务商认证',
                type: 'developer',
                desc: '服务商认证需先通过个人或企业认证，认证服务商可以入驻云市场，通过某某云市场销售获得报酬',
                combo: [
                    {
                        name: '服务商认证勋章',
                        desc: '有'
                    },
                    {
                        name: '云市场插件销售',
                        desc: '有'
                    },
                    {
                        name: '云市场模板销售',
                        desc: '有'
                    },
                    {
                        name: '云市场模块销售',
                        desc: '有'
                    }
                ],
                using: true
            }
        ]
    }
    showModal = () => {
        this.setState({
            
        })
    }
    handleOk = () => {
        this.setState({
            
        })
    }
    handleCancel = () => {
        this.setState({
            
        })
    }
    render() {
        const imgObj = {
            'personal'  : personalImg, 
            'enterprise': enterpriseImg, 
            'developer' : developerImg
        };

        return (
            <div className="page rc">
                <div className="page-head">
                    <h3 className="page-title">实名认证</h3>
                </div>
                <div className="rc-wrap">
                    <p className="rc-tips">请选择认证类型，个人认证后续可升级为企业认证，企业认证一旦认证成功，无法变更为个人认证</p>
                    <ul className="rc-type">
                        {
                            this.state.realCheck.map((item, index) => (
                                <li key={index}>
                                    <div className="rc-type-wrap">
                                        <div className="rc-type-content">
                                            <img src={imgObj[item.type]} alt="" />
                                            <h4>{item.name}</h4>
                                            <p className="rc-type-info">{item.desc}</p>
                                            <ul className="rc-type-detail">
                                                {
                                                    item.combo.map((obj, i) => (
                                                        <li key={i}>
                                                            <p>{obj.name}</p>
                                                            <p>{obj.desc}</p>
                                                        </li>
                                                    ))
                                                }
                                            </ul>
                                        </div>
                                        <p className="rc-type-click">选择并继续使用</p>
                                    </div>
                                </li>
                            ))
                        }
                    </ul>
                </div>
            </div>
        )
    }
}

export default RealCheck;